<template>
  <van-popup
    v-model="show"
    round
    position="bottom"
    :close-on-click-overlay="!(type=== 'set' || type === 'valid')"
    :closeable="type=== 'set' || type === 'valid'"
    :style="{ height: '7rem' }"
    @close="handleClose"
  >
    <div style="margin-top: 0.5rem">
      <div
        style="padding-bottom: 0.4rem; font-size: 0.35rem; text-align: center"
      >
        <span v-if="type === 'set'" style="color: '#ff6c6c'"
          >请输入要设置的资金密码</span
        >
        <span v-else-if="type === 'valid'" style="color: '#ff6c6c'"
          >请输入旧资金密码</span
        >
        <span v-else>请输入资金密码进行验证</span>
      </div>
      <!-- 密码输入框 -->
      <van-password-input
        :value="value"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-if="type === 'set'"
        v-model="value"
        maxlength="6"
        :show="showKeyboard"
        theme="custom"
        extra-key=""
        close-button-text="完成"
        @close="handleNumberKeyboardClose"
        @input="onInput"
        @delete="onDelete"
      />
      <van-number-keyboard
        v-else
        v-model="value"
        maxlength="6"
        :show="showKeyboard"
        @hide="handleNumberKeyboardClose"
        @input="onInput"
      >
      </van-number-keyboard>
    </div>
  </van-popup>
</template>

<script>
import { Toast } from 'vant'
import * as api from '@/axios/api'
export default {
  data () {
    return {
      value: '',
      show: false,
      showKeyboard: true,
      type: '',
      checkOldPwd: false
    }
  },
  watch: {
    value (password) {
      // console.log(this.type, password)
      if (password.length !== 6) {
        return
      }
      if (this.type === 'set') {

      } else if (this.type === 'valid') {
        this.validOldWithPwd(password)
      } else {
      // 自动关闭窗口
        this.show = false
        this.$emit('confirm', { type: this.type, password: password })
      }
    }
  },
  methods: {
    onDelete () {},
    onInput (val) {
    },
    hasWithPwd () {
      return new Promise((resolve, reject) => {
        api.hasWithPwd().then((res) => {
          if (res.data === true) {
            resolve(true)
          } else {
            reject(new Error('未设置资金密码'))
          }
        })
      })
    },
    open (type) {
      const that = this
      // this.type = type
      // this.value = ''
      // this.showKeyboard = true
      // this.show = true
      // console.log(that.$store.state)
      if (that.$store.state.hasWithPwd === true) {
        that.type = type
        that.value = ''
        that.showKeyboard = true
        that.show = true
        that.checkOldPwd = false
        return
      }
      Toast.loading({
        message: '加载中...',
        forbidClick: false
      })
      that.hasWithPwd()
        .then((res) => {
          Toast.clear()
          that.type = type
          that.value = ''
          that.showKeyboard = true
          that.show = true
          // 记录以及设置过密码
          this.$store.commit('hasWithPwd', true)
        })
        .catch((e) => {
          Toast.clear()
          console.error(e)
          that.type = 'set'
          that.value = ''
          that.showKeyboard = true
          that.checkOldPwd = true
          that.show = true
          that.$nextTick(() => {
            Toast.fail('请先设置资金密码')
          })
        })
    },
    openUpdatePwd () {
      this.type = 'valid'
      this.value = ''
      this.showKeyboard = true
      this.show = true
      this.checkOldPwd = false
    },
    handleClose () {
      // console.log('handleClose')
      this.show = false
      this.showKeyboard = true
    },
    handleNumberKeyboardClose () {
      // console.log('handleNumberKeyboardClose')
      this.showKeyboard = true
      this.savePassword()
    },
    savePassword () {
      if (this.value.length !== 6) {
        Toast('请输入完整密码')
        return
      }
      if (!this.checkOldPwd) {
        return
      }
      if (this.value.length !== 6 || this.type !== 'set') {
        return
      }
      Toast.loading({
        message: '设置中...',
        forbidClick: false
      })
      api
        .insertWithPwd({ withPwd: this.value })
        .then((res) => {
          Toast.clear()
          // console.log(res)
          if (res.status === 0) {
            // 记录以及设置过密码
            this.$store.commit('hasWithPwd', true)
            Toast('设置完成')
            this.handleClose()
          } else {
            Toast(res.msg)
          }
        })
        .catch(() => {
          Toast.clear()
        })
    },
    validOldWithPwd (password) {
      Toast.loading({
        message: '验证中...',
        forbidClick: false
      })
      api.validOldWithPwd({ oldWithPwd: password })
        .then(res => {
          Toast.clear()
          // console.log('validOldWithPwd', res)
          if (res.status === 0) {
            if (res.data === true) {
              this.checkOldPwd = true
              Toast('密码正确')
              this.value = ''
              this.type = 'set'
            } else {
              this.value = ''
              Toast.fail('旧密码错误')
            }
          } else {
            Toast(res.msg)
          }
        }).catch(() => {
          Toast.clear()
        })
    }
  }
}
</script>

<style>
</style>
